<template>
	<div class="text-sm mb-2 flex justify-between items-center">
		<div class="font-bold">提示</div>

		<div
			@click="showPreset = true"
			class="text-[12px] text-slate-600 py-0.5 px-2 bg-slate-200 rounded-md"
		>
			<i class="iconfont icon-bulb-full" style="font-size: 14px"></i>
			预设
		</div>

		<transition name="drop">
			<div
				v-show="showPreset"
				class="hidden md:block absolute left-[102%] top-20 rounded-2xl p-4 w-[35vw] z-10 max-h-[420px] overflow-y-auto scrollable bg-slate-200 shadow-lg"
				ref="showPresetRef"
			>
				<div class="flex justify-between items-center text-xl font-bold mb-4">
					预设
				</div>

				<div v-for="item in presets" :key="item.id">
					<div class="font-bold mb-4">{{ item.name }}</div>
					<div class="flex flex-wrap gap-4 mb-4">
						<div
							v-for="preset in item.presets"
							@click="prompt += ', ' + preset.content"
							class="py-1.5 px-4 bg-slate-300 p-2 rounded-full flex items-center justify-between text-zinc-500 hover:bg-slate-400 hover:text-zinc-50"
						>
							{{ preset.title }}
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>

	<div class="text-sm md:hidden">
		<el-drawer
			v-model="showPreset"
			direction="btt"
			size="auto"
			fit-parent
			class="custom-drawer"
		>
			<div v-for="item in presets" :key="item.id">
				<div class="font-bold mb-4">{{ item.name }}</div>
				<div class="flex flex-wrap gap-4 mb-4">
					<div
						v-for="preset in item.presets"
						@click="prompt += ', ' + preset.content"
						class="py-1.5 px-4 bg-slate-300 p-2 rounded-full flex items-center justify-between text-zinc-500 hover:bg-slate-400 hover:text-zinc-50"
					>
						{{ preset.title }}
					</div>
				</div>
			</div>
		</el-drawer>
	</div>

	<div class="relative">
		<el-input
			v-model="prompt"
			:rows="6"
			type="textarea"
			placeholder="描述基于图片生成的视频内容"
		/>

		<div
			class="absolute bottom-2 right-2 flex items-center gap-2 text-zinc-500 text-sm"
		>
			<div>
				<span :class="{'text-red-500': prompt!.length > 2000}">{{
					prompt!.length
				}}</span
				>/2000
			</div>
			<i
				class="iconfont icon-shanchu"
				style="font-size: 14px"
				@click="prompt = ''"
			></i>
		</div>
	</div>
</template>

<script setup lang="ts">
// import presetData from '@/mock/preset.json'
import { getPresets } from '@/api'

type PresetItem = {
	id: number
	title: string
	content: string
}

type Preset = {
	id: number
	name: string
	presets: PresetItem[]
}

const presets = ref<Preset[]>([])

onMounted(async () => {
	const res = await getPresets()
	presets.value = res
})

const prompt = defineModel<string>()

const showPresetRef = useTemplateRef<HTMLElement>('showPresetRef')

const showPreset = ref(false)

onClickOutside(showPresetRef, () => {
	showPreset.value = false
})
</script>

<style scoped lang="scss"></style>
